<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>
        <div id="app">
                <parent-component></parent-component>
              </div>
              <script>
                //总线(bus)传值
                Vue.prototype.bus = new Vue()
                Vue.component('parentComponent', {
                  name: 'parentComponent',
                  template: `<div><p>
                    <h2>{{content}}</h2>
                    <child-component1></child-component1>
                    <child-component2></child-component2>
                  </p></div>`,
                  data() {
                    return {
                      content: '我是父组件',
                      mdata: '子组件2'
                    }
                  }
                })
                Vue.component('childComponent1', {
                  name: 'childComponent',
                  template: `<div><p>
                    <h2>{{content}}</h2>
                    <button @click="handleClick">按钮</button>
                  </p></div>`,
                  data() {
                    return { content: '子组件1' }
                  },
                  methods: {
                    handleClick() {
                      this.bus.$emit("change", "我是子组件1，我要改变你")
                    }
                  }
                })
                Vue.component('childComponent2', {
                  name: 'childComponent',
                  template: `<div><p>
                    <h2>{{content}}</h2>
                  </p></div>`,
                  data() {
                    return { content: '子组件2' }
                  },
                  mounted() {
                    this.bus.$on('change', (val) => {
                      this.content = val
                    })
                  }
                })
            
                //根组件
                var app = new Vue({
                  el: '#app',
                })
              </script>
    
</body>
</html>